<template>
	<view class="wrap">
		<view style="background: #F1F2e5; margin-bottom:15rpx;width: 100%;height: 50rpx;"></view>
		<u-notice-bar :text="text1" color="red" mode="closable" bgColor="#F1F2e5" speed="80"></u-notice-bar>
		<!-- 输入框搜索 -->
		<u-sticky bgColor="#F1F2E5" zIndex="10000" style="top:0px;">
			<view>
				<u-search v-model="goodsName" :show-action="false" borderColor="rgb(230, 230, 230)" bgColor="#fff"
					@search="searchShop" ></u-search>
			</view>
		</u-sticky>
		<!-- 	<u-search search-icon-color="#FF0000"style="background: #F1F2e5;margin-top:20rpx;" placeholder="点击输入您想要的物品" v-model="keyword"></u-search> -->
		<!-- //轮播图 -->
		<!--           <u-swiper
			@click="toxiangqing2" 
            :list="list2" 
            keyName="imgId"
            showTitle
			interval=6000
			height="130"
            :autoplay="true"r
            circular
			style="border-bottom: 5px solid #F1F2e5;"
            ></u-swiper> -->
		<!-- 两个分类 border-left: 8px solid #F1F2e5;-->
		<view
			style="background: white;border-radius: 20rpx;margin-left: 10rpx;margin-right:10rpx;margin-bottom: -10rpx;margin-top: 20rpx;">
			<u-grid :border="false" col="4">
				<u-grid-item @click="navItemClick(listItem.path)" v-for="(listItem,listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="50"></u-icon>
			 	<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
			<!-- 			    </view> -->
			<!-- 分类2 -->
			<!-- 				<view style="background: white;border-radius: 10rpx;"> -->
			<u-grid :border="false" col="4">
				<u-grid-item @click="navItemClick(listItem.path)" v-for="(listItem,listIndex) in list1"
					:key="listIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="50"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<u-sticky style="top:34px;" bgColor="#F1F2E5" zIndex="9999">
			<u-tabs :list="list3" @change="tabschange" @click="click"></u-tabs>
		</u-sticky>
		<view class="hot_goods">

			<view class="tit">
				<!-- 推荐专区 -->
			</view>
			<view class="goods_list">
				<view class="goods_item" @click="toxiangqing(item.id)" v-for="item in goods" :key="item.id">
					<image :src="item.imgId"></image>
					<view class="price">
						<text>{{item.goodsName}}</text> <!-- 拍卖名称 -->
						<text>{{item.transactionStatus == 1 ?'未开拍': (item.transactionStatus == 2 ? '正在拍卖' : item.transactionStatus == 3 ? '拍卖结束' :'')}}</text>
						<!-- 拍卖状态 -->
					</view>
					<view class="name">
						<text style="color:red;font-size:28rpx;">起拍价格:￥</text> <!-- 拍卖名称 -->
						{{item.startPrice}}<!-- 拍卖价格 -->
					</view>
					<view class="name1">
						<text>报名人数: {{item.back}} </text>
						<!-- <text style="margin-left: 125rpx; color: grey;font-size:26rpx;"> 自营 </text> -->
					</view>
					<view class="name2">
						自营放心购 假一赔三
					</view>
				</view>
			</view>
		</view>
		<view style="background-color:#F1F2e5;height: 90px;">

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				goodsName: '',
				text1: '恭喜用户宋xx以86500元成功拍到劳力士-Submariner潜航者 116610-LV-97200绿男士机械表！！！ ',
				keyword: '爱马仕',
				goods: [],
				list3: [{
						name: '猜你喜欢',
					},
					{
						name: '我的关注'
					}
				],
				list: [{
						name: '../../static/fenlei/qiche.png',
						title: '机动车',
						path: '/pages/index/fenlei/car'
					},
					{
						name: '../../static/fenlei/fangchan.png',
						title: '土地房产',
						path: '/pages/index/fenlei/fang'
					},
					{
						name: '../../static/fenlei/guwan.png',
						title: '古玩文物',
						path: '/pages/index/fenlei/guwan'
					},
					{
						name: '../../static/fenlei/shechi.png',
						title: '奢侈品',
						path: '/pages/index/fenlei/shechipin'
					},
				],
				list1: [{
						name: '../../static/fenlei/yishu.png',
						title: '艺术品',
						path: '/pages/index/fenlei/yishu'
					}, {
						name: '../../static/fenlei/zhubao.png',
						title: '玉翠珠宝',
						path: '/pages/index/fenlei/zhubao'
					},
					{
						name: '../../static/fenlei/tobe.png',
						title: '正在拍卖',
						path: '/pages/index/inauction'
					}, {
						name: '../../static/fenlei/zheng.png',
						title: '即将拍卖',
						path: '/pages/index/tobe'
					},
				],
				list2: [{
					title: '..',
					imgId: 'sdf'
				}],
			}
		},
		onLoad() {
			this.getHotGoods()
			// this.publisMo()
		},

		methods: {
			//拍卖商品
			searchShop() {
				uni.navigateTo({
					url: '/pages/index/searchHistory?goodName=' + this.goodsName
				})
			},

			toxiangqing2(id) {
				uni.navigateTo({
					url: '/pages/paiMaiXiangQing/paiMaiXiangQing?id=' + this.list2[id].id,
				})
			},
			toxiangqing(id) {

				uni.navigateTo({
					url: '/pages/paiMaiXiangQing/paiMaiXiangQing?id=' + id,
				})
			},
			//获取推荐专区列表数据
			async getHotGoods() {
				const res = await this.$myRuquest({
					url: 'client/auction/getGoodsListNotPage'
				})
				this.goods = res.data.obj
				this.goods.forEach(a => {
					a.imgId = 'http://101.43.223.224:8765/image/getImageById?id=' + a.imgId.split(",")[0]
				})
				var llll = this.goods.slice(0, 5)
				this.list2 = llll.map(a => {
					return {
						imgId: a.imgId,
						title: a.goodsName,
						id: a.id
					}
				})
				console.log(this.list2)
			},

			//导航点击的处理函数
			navItemClick(url) {
				// console.log(url)
				uni.navigateTo({
					url
				})
			},

			



		}

	}
</script>
<style lang="scss" scoped>
	.u-page__tag-item {
		@include flex(column);
		flex: 1
	}

	.hot_goods {
		border-top: 3px solid #F1F2e5;
		background: #F1F2e5;
		overflow: hidden;
		margin-top: 5px;

		.tit {
			width: 100%;
			height: 1px;
			line-height: 33px;
			color: black;
			font-size: 30rpx;
			text-align: center;
			letter-spacing: 1px;
			background: #F1F2e5;
			margin: 1rpx 0;
		}

		.goods_list {
			margin-top: 1px;
			padding: 0 11rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.goods_item {
				border-radius: 20rpx;
				background: white;
				width: 354rpx;
				margin: 7rpx 5rpx;
				padding: 11rpx;
				box-sizing: border-box;

				image {
					width: 90%;
					height: 140px;
					display: block;
					margin: auto;
				}

				.price {
					color: #6B4226;
					font-size: 30rpx;
					margin: 0rpx 5rpx 7rpx 15rpx;

					text:nth-child(2) {
						color: grey;
						font-size: 26rpx;
						margin-left: 14rpx;
						// text-decoration: line-through;
						// 割线
					}
				}

				.name {
					color: #EB0045;
					font-size: 38rpx;
					line-height: 40rpx;
					margin: 13rpx 15rpx 0rpx 15rpx;

				}

				.name1 {
					color: grey;
					font-size: 26rpx;
					line-height: 40rpx;
					margin: 10rpx 5rpx 1rpx 15rpx;

				}

				.name2 {
					background-color: #F1F2e5;
					color: red;
					display: flex;
					align-items: center;
					padding: 8rpx 50rpx;
					border-radius: 8rpx;
					font-size: 20rpx;
					line-height: 1;
					margin: 10rpx 3rpx 3rpx 1rpx;

				}
			}
		}
	}

	.grid-text {
		margin-bottom: 10px;
		font-size: 12px;
		color: #102, 102, 102;
		padding: 5rpx 0 5rpx 0rpx;
		box-sizing: border-box;
	}

	.wrap {
		width: 100%;
		height: 100%;
		background: #F1F2e5;
		// margin-top: 10px;
		// padding: 1rpx;

	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
